"use client"

import { useState } from "react"
import { Menu } from "lucide-react"

// 注意：在Vite项目中，shadcn/ui组件的导入路径可能不同
// 请根据你的实际项目结构调整这些导入路径
import { Button } from "@/components/ui/button"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"

interface NavItem {
  title: string
  href: string
}

const navItems: NavItem[] = [
  {
    title: "首页",
    href: "/",
  },
  {
    title: "产品",
    href: "/products",
  },
  {
    title: "服务",
    href: "/services",
  },
  {
    title: "关于我们",
    href: "/about",
  },
  {
    title: "联系我们",
    href: "/contact",
  },
]

export default function Navbar() {
  const [open, setOpen] = useState(false)

  return (
    <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 items-center">
        <div className="mr-4 flex">
          <a href="/" className="mr-6 flex items-center space-x-2">
            <span className="font-bold text-xl">Logo</span>
          </a>
        </div>

        {/* 移动端导航 */}
        <div className="flex md:hidden">
          <Sheet open={open} onOpenChange={setOpen}>
            <SheetTrigger asChild>
              <Button
                variant="ghost"
                size="icon"
                className="mr-2 px-0 text-base hover:bg-transparent focus-visible:bg-transparent focus-visible:ring-0 focus-visible:ring-offset-0 md:hidden"
              >
                <Menu className="h-5 w-5" />
                <span className="sr-only">打开菜单</span>
              </Button>
            </SheetTrigger>
            <SheetContent side="left" className="pr-0">
              <div className="px-7">
                <a href="/" className="flex items-center">
                  <span className="font-bold text-xl">Logo</span>
                </a>
              </div>
              <nav className="flex flex-col gap-4 px-7 mt-8">
                {navItems.map((item, index) => (
                  <a
                    key={index}
                    href={item.href}
                    className="text-muted-foreground transition-colors hover:text-foreground"
                    onClick={() => setOpen(false)}
                  >
                    {item.title}
                  </a>
                ))}
              </nav>
            </SheetContent>
          </Sheet>
        </div>

        {/* PC端导航 */}
        <nav className="hidden md:flex md:flex-1 md:items-center md:justify-between">
          <div className="flex gap-6 md:gap-10">
            {navItems.map((item, index) => (
              <a
                key={index}
                href={item.href}
                className="text-sm font-medium transition-colors hover:text-foreground/80 text-foreground/60"
              >
                {item.title}
              </a>
            ))}
          </div>
          <div className="flex items-center gap-4">
            <Button variant="outline" size="sm">
              登录
            </Button>
            <Button size="sm">注册</Button>
          </div>
        </nav>
      </div>
    </header>
  )
}
